
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>web player</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<script type="text/javascript" src="./chplayer/chplayer.min.js"></script>		
		<link rel="stylesheet" type="text/css" href="./lib/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="./lib/reset.css" />		
		<link type="text/css" rel="stylesheet" href="./lib/desert.css" />
	</head>

	<body>
		<div class="container-fluid padding-top-10 padding-bottom-10 hide">
			<div class="row">
				<div class="col-xs-12 col-sm-5 col-md-5 col-sm-offset-1 col-md-offset-1">
					
				</div>
				<div class="col-xs-12 col-sm-5 col-md-5 text-right padding-top-10">
					<h5>当前版本：V1.01（更新时间：2017-05-(9/10)）</h5>
				</div>
			</div>
		</div>
		
		<div class="container-fluid padding-top-10">
			<div class="row">
				<div class="col-xs-12  col-md-8  col-md-offset-2">
					<div id="video" class="video"></div>
				</div>
			</div>
		</div>
		<div class="container-fluid padding-top-10">
			<div class="row">
				<div class="col-xs-12  col-md-8  col-md-offset-2">
					<h3 class="playerstate" style="font-size: 18px;">状态：等待加载播放器</h3>
					<p class="metadata"></p>
				</div>
			</div>
		</div>
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-12  col-md-8  col-md-offset-2">
					<h3>操作功能：</h3>
				</div>
			</div>
			<div class="row padding-bottom-10">
				<div class="col-xs-12  col-md-8  col-md-offset-2">
					<button type="button" class="btn btn-primary" onclick="player.play()">播放</button>
					<button type="button" class="btn btn-success" onclick="player.pause()">暂停</button>
					<button type="button" class="btn btn-info" onclick="player.playOrPause()">播放/暂停</button>
					<button type="button" class="btn btn-warning" onclick="loadedMetaDataHandler()">获取元数据</button>
					<!-- <button type="button" class="btn btn-success" onclick="newElement()">添加元件</button> -->
					<!-- <button type="button" class="btn btn-info" onclick="newDanmu()">添加弹幕</button> -->
					<!-- <a class="btn btn-success" href="manual/animate.html" target="_blank">更多弹幕动作</a> -->
				</div>
			</div>
			<div class="row padding-bottom-10">
				<div class="col-xs-12 col-sm-6 col-md-3  col-md-offset-2">
					<div class="inputleft input-group">
						<div class="input-group-addon">跳转时间：</div>
						<input type="text" class="textinput seektime form-control" placeholder="0" value="20">
						<div class="input-group-addon">秒</div>
					</div>
					<span class="floatleft">
					    <button type="button" class="btn btn-info" onclick="seekTime()">跳转</button>
					</span>
				</div>
			</div>
			<div class="row padding-bottom-10">
				<div class="col-xs-12 col-sm-6 col-md-3  col-md-offset-2">
					<div class="inputleft input-group">
						<div class="input-group-addon">设置音量：</div>
						<input type="text" class="textinput changevolume form-control" placeholder="0.2" value="0.2">
					</div>
					<span class="floatleft">
					    <button type="button" class="btn btn-info" onclick="changeVolume()">设置</button>
					</span>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12  col-md-8  col-md-offset-2">
					<div class="inputleft input-group">
						<div class="input-group-addon">设置一个新视频地址：</div>
						<input type="text" class="videourl form-control" placeholder="视频地址" value="http://www.flashls.org/playlists/test_001/stream_1000k_48k_640x360.m3u8">
					</div>
					<div class="floatleft">
						<button type="button" class="btn btn-info" onclick="newVideo()">播放</button>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12  col-md-8  col-md-offset-2">
					<div class="inputleft input-group">
						<div class="input-group-addon">设置一个新视频地址：</div>
						<input type="text" class="videourl2 form-control" placeholder="视频地址" value="http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4">
					</div>
					<div class="floatleft">
						<button type="button" class="btn btn-info" onclick="newVideo2()">播放</button>
					</div>
				</div>
			</div>
		</div>
		
		<div class="container-fluid padding-top-10">
			<div class="row">
				<div class="col-xs-12  col-md-8  col-md-offset-2">
					<h3>监听功能：</h3>
					<p class="handler">
						<span class="playstate btn btn-primary">播放状态：暂停</span>
						<span class="seekstate btn btn-danger">无跳转时间</span>
						<span class="volumechangestate btn btn-info">当前音量：0.8</span>
						<span class="fullstate btn btn-warning">是否全屏：否</span>
						<span class="endedstate btn btn-success">还未结束</span>
						<span class="videochangestate btn btn-danger">视频地址正常</span>
						<span class="currenttimestate btn btn-info">当前播放时间（秒）：0</span>
					</p>
				</div>
			</div>
		</div>

        <div class="container-fluid padding-top-10 hide">
                <div class="row">
                    <div class="col-xs-12  col-md-8  col-md-offset-2">
                        <h3>极简调用代码：</h3>
                        <pre class="prettyprint lang-html linenums prettyprinted"><ol class="linenums"><li class="L0"><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"chplayer/chplayer.js"</span><span class="tag">&gt;&lt;/script&gt;</span></li><li class="L1"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"video"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">width</span><span class="pun">:</span><span class="lit">600px</span><span class="pun">;</span><span class="kwd">height</span><span class="pun">:</span><span class="lit">400px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span></li><li class="L2"><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span></li><li class="L3"><span class="pln">	</span><span class="kwd">var</span><span class="pln"> videoObject </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span></li><li class="L4"><span class="pln">		container</span><span class="pun">:</span><span class="pln"> </span><span class="str">'#video'</span><span class="pun">,</span><span class="com">//“#”代表容器的ID，“.”或“”代表容器的class</span></li><li class="L5"><span class="pln">		variable</span><span class="pun">:</span><span class="pln"> </span><span class="str">'player'</span><span class="pun">,</span><span class="com">//该属性必需设置，值等于下面的new chplayer()的对象</span></li><li class="L6"><span class="pln">		video</span><span class="pun">:</span><span class="str">'examples01.mp4'</span><span class="com">//视频地址</span></li><li class="L7"><span class="pln">	</span><span class="pun">};</span></li><li class="L8"><span class="pln">	</span><span class="kwd">var</span><span class="pln"> player</span><span class="pun">=</span><span class="kwd">new</span><span class="pln"> chplayer</span><span class="pun">(</span><span class="pln">videoObject</span><span class="pun">);</span></li><li class="L9"><span class="tag">&lt;/script&gt;</span></li></ol></pre>
                    </div>
                </div>
            </div>

		<div class="container-fluid padding-top-10 hide" >
			
			<div class="row padding-bottom-10">
				<div class="col-xs-12  col-md-8  col-md-offset-2">
					<h4 class="btn btn-info">支持的视频格式</h4>
				</div>
			</div>
			<div class="row">
				<div class="link col-xs-12  col-md-8  col-md-offset-2">
						<div class="col-xs-12 col-sm-12 col-md-12">
							<table class="table table-hover table-bordered">
								<thead>
									<tr>
										<th class="text-center">浏览器</th>
										<th colspan="2" class="text-center">支持的视频格式</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="text-center">&nbsp;</td>
										<td class="text-center">PC端</td>
										<td class="text-center">移动端</td>
									</tr>
									<tr>
										<td class="text-center">Chrome</td>
										<td class="text-center">MP4,M3U8,FLV,RTMP协议</td>
										<td class="text-center">MP4,WebM,M3U8</td>
									</tr>
									<tr>
										<td class="text-center">Firefox</td>
										<td class="text-center">MP4,M3U8,FLV,RTMP协议</td>
										<td class="text-center">MP4,WebM,M3U8</td>
									</tr>
									<tr>
										<td class="text-center">Internet Explorer</td>
										<td class="text-center">MP4,M3U8,FLV,RTMP协议</td>
										<td class="text-center">MP4,M3U8</td>
									</tr>
								</tbody>
							</table>
							<table class="table table-hover table-bordered">
								<thead>
									<tr>
										<th class="text-center">移动端平台</th>
										<th class="text-center">支持的视频格式</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="text-center">Android</td>
										<td class="text-center">MP4,M3U8</td>
									</tr>
									<tr>
										<td class="text-center">iOS</td>
										<td class="text-center">MP4,M3U8</td>
									</tr>
									<tr>
										<td class="text-center">Safari</td>
										<td class="text-center">MP4,M3U8</td>
									</tr>
								</tbody>
							</table>
						</div>
				</div>
			</div>
			<div class="row">
				<div class="link col-xs-12 col-sm-8 col-md-8  col-md-offset-2">
					<p>
						建议点播优先使用mp4，其次使用m3u8。直播优先使用m3u8,这样可以兼容各平台。尽量不要使用flv来做点播，也不要使用rtmp协议来做直播,移动端不支持flv格式的点播放，也不支持rtmp协议的直播
					</p>
				</div>
			</div>
		</div>
		<div class="container-fluid padding-top-10">
			<div class="row">
				<div class="link col-xs-12 col-sm-8 col-md-8  col-md-offset-2">
					<h3>示例：</h3>
					<p class="example-more">
                        <button class="btn btn-success btn-demo" type="button" data-url='http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4'>mp4格式播放示例</button>
                        <button class="btn btn-info btn-demo" data-url='http://img.ksbbs.com/asset/Mon_1704/15868902d399b87.flv'>flv格式播放示例</button>
                        <button class="btn btn-success btn-demo" data-url='=http://www.flashls.org/playlists/test_001/stream_1000k_48k_640x360.m3u8'>传统m3u8格式播放示例</button>
                        <button class="btn btn-info btn-demo" data-url='http://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8&hls=1'>hls-m3u8格式播放示例</button>
                        <button class="btn btn-success btn-demo" data-url='rtmp://live.hkstv.hk.lxdns.com/live/hks'>rtmp协议播放示例</button>
					</p>
				</div>
			</div>
		</div>
		
		
		
        <script type="text/javascript" src="./lib/jquery.js"></script>
        <script type="text/javascript" src="./lib/player.js"></script>
        <script type="text/javascript" src="./lib/prettify.js"></script>
		<script type="text/javascript" src="./lib/lang-css.js"></script>
	</body>

</html>